<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NiceBoard - 跨平台剪贴板管理工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <!-- 添加这行 -->
    <link href="./css/all.min.css" rel="stylesheet">



    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0E2E8C',
                        accent: '#36CFC9',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.1), 0 10px 10px -5px rgba(22, 93, 255, 0.04);
            }
        }
    </style>
</head>

<body class="font-inter bg-white text-dark">
    <div class="container mx-auto px-4 py-12 md:py-20 max-w-5xl">
        <!-- Logo 和副标题 -->
        <div class="text-center mb-12">
            <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-primary mb-4 tracking-tight">
                <span class="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">NiceBoard</span>
            </h1>
            <p class="text-[clamp(1.2rem,2vw,1.5rem)] text-gray-600 max-w-3xl mx-auto">
                好贴板—跨平台剪贴板管理与多设备同步工具
            </p>
        </div>

        <!-- 下载按钮 -->
        <div class="flex flex-col sm:flex-row justify-center gap-4 mb-16">
            <a href="https://gitee.com/huang-hongzhe/synclipboard/releases/download/v53/NiceBoard%20(1).exe"
                class="group bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg shadow-lg shadow-primary/20 transition-all duration-300 flex items-center justify-center gap-2">
                <i class="fab fa-windows text-xl"></i>
                <span>下载 Windows</span>
            </a>
        </div>



        <!-- 核心功能 -->
        <div class="mb-16">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-8 border-b-2 border-gray-100 pb-4">
                核心功能
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100 card-hover">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-clipboard text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">无限历史记录管理</h3>
                    <p class="text-gray-600">支持自定义最大记录数（默认10万条），自动清理旧记录，节省存储空间</p>
                </div>
                <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100 card-hover">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-search text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">智能搜索与标签系统</h3>
                    <p class="text-gray-600">正则表达式精准搜索，动态标签多级分类，搜索防抖优化，减少无效查询</p>
                </div>
                <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100 card-hover">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-globe text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">多设备同步与 Web 管理</h3>
                    <p class="text-gray-600">局域网实时互传，手机扫码快速连接，Web 控制台支持远程查看/导出数据</p>
                </div>
            </div>
        </div>

        <!-- 技术特点 -->
        <div class="mb-16">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-8 border-b-2 border-gray-100 pb-4">
                技术特点
            </h2>
            <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
                <ul class="space-y-4">
                    <li class="flex items-start gap-3">
                        <div
                            class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mt-1 flex-shrink-0">
                            <i class="fa fa-check text-primary text-sm"></i>
                        </div>
                        <span>前端：PySide6 原生 GUI</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <div
                            class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mt-1 flex-shrink-0">
                            <i class="fa fa-check text-primary text-sm"></i>
                        </div>
                        <span>后端：Flask + SocketIO 实时通信</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <div
                            class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mt-1 flex-shrink-0">
                            <i class="fa fa-check text-primary text-sm"></i>
                        </div>
                        <span>数据库：支持 SQLite / PostgreSQL / MySQL</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- QQ群加入 -->
        <!-- QQ群加入 -->
        <div class="mb-16 text-center">
            <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100 max-w-2xl mx-auto">
                <h2 class="text-xl font-bold mb-4">加入QQ交流群</h2>
                <div class="flex flex-col md:flex-row items-center justify-center gap-6">
                    <!-- 二维码图片容器 - 调整了尺寸和填充方式 -->
                    <div
                        class="bg-gray-100 rounded-lg overflow-hidden w-full md:w-48 h-48 flex items-center justify-center p-2">
                        <!-- 这里替换为你的QQ群二维码图片 -->
                        <img src="img/qrcode_1749475911396.jpg" alt="NiceBoard QQ群二维码"
                            class="w-full h-full object-contain">
                    </div>
                    <div class="text-left">
                        <p class="text-gray-600 mb-3">扫码加入好帖板官方群，与开发者和其他用户交流</p>
                        <!-- QQ群 -->
                        <div class="flex flex-wrap items-center gap-2">
                            <i class="fab fa-qq text-xl text-blue-500"></i>
                            <span class="font-medium">群号: 1050762361</span>
                            <a href="https://qm.qq.com/q/AhDQwBPIys" target="_blank"
                                class="text-primary hover:underline">点击这里加入QQ群</a>
                        </div>


                        <!-- <div class="flex flex-wrap items-center gap-2"></div>
                        <i class="fab fa-qq text-xl text-blue-500"></i>
                        <span class="font-medium">群号: 1050762361</span>
                        <a href="https://qm.qq.com/q/AhDQwBPIys" target="_blank"
                            class="text-primary hover:underline">点击这里加入QQ群</a> -->
    
                    </div>
                    
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer class="text-center text-gray-500">
        <p class="mb-2">© 2025 NiceBoard </p>
        <div class="flex justify-center gap-4 mb-4">
            <a href="https://github.com/hongzhe12/NiceBoard/issues"
                class="text-gray-500 hover:text-primary transition-colors">
                <i class="fab fa-github text-xl"></i>
            </a>
            <a href="mailto:hongzhe2022@163.com" class="text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-envelope text-xl"></i>
            </a>
        </div>
        <p>问题反馈：<a href="https://github.com/hongzhe12/NiceBoard/issues" class="text-primary hover:underline">GitHub
                Issues</a></p>
        <p>技术支持：<a href="mailto:hongzhe2022@163.com" class="text-primary hover:underline">hongzhe2022@163.com</a>
        </p>
    </footer>
    </div>





    <script>
        // 添加滚动动画
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>